<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }
    </style>
    <script src='./vue.global.js'></script>
    <script src='./gsap.min.js'></script>
</head>

<body>
    <div id="animated-number-demo">
        <input v-model.number="number" type="number" step="20" />
        <p>{{ animatedNumber }}</p>
    </div>
    <script>
        const Demo = {
            data() {
                return {
                    number: 0,
                    tweenedNumber: 0
                }
            },
            computed: {
                animatedNumber() {
                    return this.tweenedNumber.toFixed(0)
                }
            },
            watch: {
                number(newValue) {
                    gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue })
                }
            }
        }

        Vue.createApp(Demo).mount('#animated-number-demo')
    </script>
</body>

</html>